.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* #ifdef MP-WEIXIN */

  .todo-head {
    width: 100%;
    text-align: center;
    position: fixed;
    top: 0;
    z-index: 99; /* 确保吸顶后在最上层 */
    background-color: @bg-color;
  }

  /* #endif */

  .doings-box {
    width: 95vw;
    margin: 200rpx 0 50rpx 0;

    .doing-tip {
      height: 40rpx;
    }
    :deep(.u-swiper) {
      height: 300rpx !important;
      .u-swiper__wrapper {
        height: 100% !important;
      }
      .u-swiper__wrapper__item__wrapper {
        height: 100%;
        .u-swiper__wrapper__item__wrapper__image {
          width: 100% !important;
          height: 100% !important;
        }
      }
    }
  }

  .box {
    width: 100vw;
  }

  .list {
    width: 100vw;
    .list-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100vw;
      box-sizing: border-box;
      z-index: 99;

      .header-title {
        padding-left: 35rpx;
        box-sizing: border-box;
      }

      .area {
        padding-right: 14rpx;
        box-sizing: border-box;
        font-family: "ali-p";
        font-size: 23rpx;
        color: @color-grey-text;
        white-space: nowrap;
      }
    }
    .tabs-box {
      width: 100%;
      flex: 1;
      flex-direction: column;
      /* overflow: hidden; */
      background-color: #fff;
      // height: 30vh;
      z-index: 9;
      :deep(.u-tabs) {
        background-color: @color-origin-white;
        padding-left: 31rpx;
        .u-tabs__wrapper {
          .u-tabs__wrapper__scroll-view-wrapper {
            .u-tabs__wrapper__scroll-view {
              .u-tabs__wrapper__nav {
                .u-tabs__wrapper__nav__line {
                  width: 40rpx !important;
                }
              }
            }
          }
        }
      }
    }
  }

  .text-box {
    margin: 30rpx 0;
    padding: 0 30rpx;
    font-size: 23rpx;
    font-weight: 400;
    color: #68696a;
  }

  .cancellation-box {
    position: fixed;
    width: 613rpx;
    height: 500rpx;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .cancellation {
      width: 613rpx;
      height: 356rpx;
      background: #ffffff;
      border-radius: 20rpx;

      .name {
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        font-weight: 400;
        font-family: "ali";
      }

      .tail {
        text-align: center;
        font-size: 31rpx;
        color: #5590f6;
        height: 100rpx;
        line-height: 100rpx;
      }
    }

    .close-btn {
      width: 74rpx;
      height: 74rpx;
      line-height: 74rpx;
      text-align: center;
      background: #ffffff;
      opacity: 0.85;
      border-radius: 50%;
      margin: 0 auto;
      margin-top: 20rpx;
    }
  }

  .scroll-h {
    /* #ifdef H5 */
    width: 100%;
    /* #endif */
    height: 100rpx;
    flex-direction: row;
    /* #ifndef APP-PLUS */
    white-space: nowrap;
    /* #endif */
    // position: sticky !important;
    z-index: 999;
    top: var(--window-top);
    white-space: nowrap;
    text-align: center;
    background-color: #fff;

    &.sticky {
      position: fixed;
      left: 0;
      z-index: 99; /* 确保吸顶后在最上层 */
    }
  }

  .uni-tab-item {
    display: inline-block;
    flex-wrap: nowrap;
    padding-left: 34rpx;
    padding-right: 34rpx;
  }

  .uni-tab-item-title {
    color: #555;
    font-size: 30rpx;
    height: 80rpx;
    line-height: 80rpx;
    flex-wrap: nowrap;
  }

  .uni-tab-item-title-active {
    padding: 6px 0;
    // color: #00B588;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom: 10rpx solid #00b588;
    font-weight: bold;
  }

  .mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .popup-dialog {
      width: 620rpx;
      background-color: @color-origin-white;
      border-radius: 20rpx;
      padding: 40rpx 120rpx;
      box-sizing: border-box;

      .title {
        width: 365rpx;
        font-family: "ali-p";
        font-weight: 400;
        font-size: 39rpx;
        color: @color-black-text;
        white-space: nowrap;
      }

      .text-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 52rpx;
        .img_box {
          width: 100%;
          overflow: hidden;
        }
        .text {
          font-family: "ali-p";
          font-size: 23rpx;
          color: @color-grey-text;
          font-weight: 400;
          line-height: 39rpx;

          .special {
            color: @color-green-text;
          }
        }
      }

      .btn-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: @color-blue-text;
        font-family: "ali-p";
        font-size: 31rpx;
        line-height: 39rpx;
        margin-top: 40rpx;

        .btn {
          margin-top: 20rpx;
        }
      }
    }

    :deep(.u-icon) {
      margin-top: 20rpx;
      border: 1px solid @color-origin-white;
      border-radius: 50%;
      padding: 24rpx;
      box-sizing: border-box;
      background-color: @color-origin-white;
      opacity: 0.85;
    }
  }

  .more-area-popup {
    padding: 37rpx 27rpx 21rpx 40rpx;
    box-sizing: border-box;
    font-family: "ali-p";

    .title {
      display: inline-block;
      width: 100%;
      padding-bottom: 30rpx;
      border-bottom: 1px solid @color-light-grey-border;
      font-weight: 500;
      font-size: 31rpx;
      color: @color-black-text;
      line-height: 39rpx;
    }

    :deep(.u-grid) {
      margin-top: 31rpx;
      border-bottom: 1px solid @color-light-grey-border;
      .u-grid-item {
        .area-normal {
          display: inline-block;
          padding: 11rpx 25rpx;
          margin-bottom: 31rpx;
          max-height: 44rpx;
          text-align: center;
          background-color: @color-light-grey-btn;
          font-size: 23rpx;
          font-family: "ali-p";
          white-space: nowrap;
          color: @color-light-grey-text;
          border-radius: 22rpx;
        }
        .area-selected {
          background: @linear-gradient-btn;
          color: @color-origin-white;
        }
      }
    }

    .btn-group {
      display: flex;
      justify-content: space-between;
      margin-top: 19rpx;
      .btn {
        width: 322rpx;
        height: 65rpx;
        text-align: center;
        border-radius: 33rpx;
        font-family: "ali-p";
        font-weight: 500;
        font-size: 31rpx;
        line-height: 65rpx;
      }
      .clear {
        color: @color-green-text;
        border: 1px solid @color-green;
      }

      .sure {
        background: @linear-gradient-btn;
        color: @color-origin-white;
      }
    }
  }
}
